<script setup lang="ts">
import AccountSvg from '../svg/accountSvg.vue'
import PasswordSvg from "../svg/passwordSvg.vue";
import VerificationSvg from "../svg/verificationSvg.vue";
import Spin from "../svg/spin.vue"
import {ref} from "vue";
import {reactive} from "vue";
import router from "../Router";
import { testPostRequestBody, testPostRequestParam} from "../network/api.ts";
import axios from "axios";
import {getUserById, userLogin} from "../network/userApi.ts";
import {currentRoleIndex, findUserRole} from "../utils/UserUtils.ts";

let username = ref(localStorage.getItem("currentUsername"));
let password = ref(localStorage.getItem("currentPassword"));
let waitSpin = ref(0);

function login(){
  waitSpin.value = 1
  console.log("username.value",username.value)
  console.log("password.value",password.value)
  if(username.value == "" || password.value == ""){
    console.log("can't empty")
    alert("can't empty")
    waitSpin.value = 0
  }else{
    localStorage.setItem("token",username.value+password.value)
    let user_temp = reactive({
      password: password.value,
      username: username.value
    })
    userLogin(user_temp).then(res=>{
      console.log(res.data)
      if(res.data.message=='登录成功'){
        console.log(res.data.message)
        localStorage.setItem("currentUsername",username.value)
        localStorage.setItem("currentPassword",password.value)
        let tempUserId = ref({id:res.data.data})
        localStorage.setItem("currentUserId", tempUserId.value.id)
        getUserById(tempUserId.value).then(res=>{
          let roles:[] = res.data.data.roles
          localStorage.setItem("currentRoleIndex",findUserRole(roles))
          console.log("localStorage.getItem(\"currentRoleIndex\"):",localStorage.getItem("currentRoleIndex"))
          console.log("localStorage.getItem(\"currentUserId\"):",localStorage.getItem("currentUserId"))

          console.log(res.data.message)
          alert(res.data.message)
          waitSpin.value = 0
          router.push('/home')
        })
      }else{
        console.log(res.data.message)
        alert(res.data.message)
        waitSpin.value = 0
      }
    })
  }
}

function login_temp(){
  router.push({
    path:'/home'
  })
}
function register(){
  router.push({
    path:'/register'
  })
}

</script>

<template>
  <div class="background w-full h-full fixed top-0 left-0
flex flex-col justify-center items-center gap-5"
 >
    <div class="text-8 text-white font-bold select-none fixed top-5 left-10">
      自然资源调查分析平台
    </div>
    <div class="bg-gray-1 w-160 h-90 rounded-xl
    flex flex-col justify-center items-center shadow-gray-5 shadow-lg
">
      <div class="ml-10 text-blue text-7 font-bold select-none">欢迎登录</div>
      <div class="input mt-5 flex flex-col ">
        <div class="account-input h-12 flex justify-center items-center gap-3">
          <account-svg class="w-8 h-8"></account-svg>
          <div class="w-15 flex justify-center"><p class="select-none text-5 text-gray">账号</p></div>
          <input type="text"
                 placeholder="请输入您的用户名"
                 class="h-6 pl-2 rounded-1 outline-none
                 placeholder:text-gray-4 placeholder:text-3
                 border-1 border-solid border-gray-3
                 text-4 text-gray-5"
                 v-model="username"
          />
        </div>
        <div class="password-input h-12 flex justify-center items-center gap-3">
          <password-svg class="w-8 h-8 text-#1296db"></password-svg>
          <div class="w-15 flex justify-center"><p class="select-none text-5 text-gray">密码</p></div>
          <input type="password"
                 placeholder="请输入您的密码"
                 class="h-6 pl-2 rounded-1 outline-none
                 placeholder:text-gray-4 placeholder:text-3
                 border-1 border-solid border-gray-3
                 text-4 text-gray-5"
                 v-model="password"
          />
        </div>
        <button class="mt-5 h-10 text-white bg-blue border-none rounded-1
        hover:bg-blue-5  flex justify-start items-center gap-3 pl-36"
                @click="login"
        >
          <p class="text-5 text-white">登 录</p>
          <Spin class="animate-spin w-5 h-7" v-show="waitSpin==1" ></Spin>

        </button>
        <div class="mt-3 mr-1 text-gray text-4 flex justify-end
select-none hover:text-blue"
        @click="register">
          还没有账号，点击进行注册
        </div>
      </div>

    </div>
  </div>
</template>

<style scoped>
.background {
  background-image: url(../assets/bg2.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}
</style>